<template>
  <view class="my">
    <view class="top">
      <span class="back" @click="back">
        <image src="../../static/images/common/back.png" mode=""></image>
      </span>
      <span v-if='info.realation == 0'>
        <text style="font-size: 40rpx; font-weight: 700;">我</text>
      </span>
      <span class="more" v-if='info.realation == 0 || info.realation == 1'>
        <image src="../../static/images/userhome/more.png" mode="" @click="gotoUserDetail"></image>
      </span>
    </view>
    <view class="bg">
      <image :src='info.userInfo.imgurl' mode=""></image>
    </view>

    <view class="mains">
      <view class="avater" style="z-index: 99;">
        <view class="avater-p">
          <image @click="seePic" :src="info.userInfo.imgurl" mode=""></image>
          <view class="sex female" v-if='info.userInfo.sex=="女"'>
            <image src="../../static/images/userhome/female.png" mode=""></image>
          </view>
          <view class="sex male" v-if='info.userInfo.sex=="男"'>
            <image src="../../static/images/userhome/male.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="username">
        <span v-show="info.markName">{{info.markName}}</span>
        <span class="nickname">昵称：{{info.userInfo.username}}</span>
      </view>
      <view class="info">
        <text v-if="info.userInfo.explain != null">{{info.userInfo.explain}}</text>
        <text v-else>这家伙好懒,没有写下自己的留言~</text>
      </view>
    </view>
    <view class="button" v-if='info.realation != 0'>
      <button v-if='info.realation == 2 ' size="default" type="primary" @click="addFirend">加为好友</button>
      <button v-if='info.realation == 1 ' size="default" type="primary" @click="sendMsg">发送信息</button>
    </view>


    <transition enter-active-class="animate__fadeInBottomLeft animate__animated"
      leave-active-class="animate__animated animate__fadeOutBottomLeft">
      <view class="add-bg " v-if="info.flag">
        <view class="addperson">
          <view class="name">{{info.userInfo.username}}</view>

          <view class="text">
            <uni-easyinput type="textarea" autoHeight v-model="info.message" :placeholder='`${info.myname}请求添加好友~`'>
            </uni-easyinput>
          </view>

          <view class="opertor">
            <view class="cnacel">
              <button size="default" plain type="default" @click="cancel">取消</button>
            </view>
            <view class="send">
              <button size="default" type=' primary' @click="send">发送</button>
            </view>
          </view>
        </view>
      </view>
    </transition>

  </view>
</template>

<script setup>
  import 'animate.css';
  import {
    reactive,
    getCurrentInstance,
    watch
  } from 'vue'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  import {
    useUserStore
  } from '@/store/user.js'
  import {
    requestNet
  } from '../../api/base';
  const instance = getCurrentInstance()
  const user = useUserStore()
  const info = reactive({
    id: '', //其他用户对象id
    uid: '', //当前用户id
    token: '',
    userInfo: {}, //对象用户信息
    markName: '', //当前用户给好友的昵称
    myname: '', //当前用户的用户名
    flag: false,
    realation: null, //与某用户的关系  0自己 1好友 2陌生人
    message: '请求添加好友~', //添加好友留言
  })
  //前往添加好友页面
  function addFirend() {
    info.flag = true
  }
  //取消
  function cancel() {
    info.flag = false
    info.message = ''
  }
  //返回
  function back() {
    uni.navigateBack(-1)
  }
  //跳转到用户详情页面
  function gotoUserDetail() {
    uni.navigateTo({
      url: `/pages/userdetail/userdetail?id=${info.id}`
    })
  }
  //查看头像大图
  function seePic() {
    uni.previewImage({
      urls: [info.userInfo.imgurl],
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: function(data) {
          console.log(data)
        },
        fail: function(err) {
          console.log(err.errMsg);
        }
      }
    });
  }

  //获取当前用户缓存信息
  function getNowUserInfo() {
    info.uid = user.userinfo.userid
    info.token = user.token
    info.myname = user.userinfo.username
  }
  //获取查看对象用户的详细信息
  function getTargetUserInfo() {
    uni.request({
      url: `${instance.proxy.serverUrl}/user/userDetail`,
      method: 'GET',
      data: {
        userid: info.id,
      },
      header: {
        token: info.token
      },
      success: (res) => {
        info.userInfo = res.data.data[0]
        info.userInfo.imgurl = `${instance.proxy.serverUrl}${res.data.data[0].imgurl}`
      }
    })
  }
  //判断查看对象是否是当前对象的好友
  function judgeIsFriend() {
    if (info.id == info.uid) //自己查看自己
      info.realation = 0
    else { //验证与此用户的好友关系
      uni.request({
        url: `${instance.proxy.serverUrl}/search/checkfriend`,
        method: 'GET',
        data: {
          uid: info.uid,
          fid: info.id
        },
        header: {
          token: info.token
        },
        success: (res) => {
          if (res.data.code == 200) { //当前用户与查看用户是好友
            info.realation = 1
            //备注名存在，就赋给markNmame
            info.markName = res.data.data[0].nickname
          } else if (res.data.code == 400) {
            info.realation = 2
            //不存在，则使用自己用户的用户名
            info.markName = info.userInfo.username
          }
        }
      })
    }
  }

  //发送好友请求
  function send() {
    info.message = info.myname + ':' + info.message
    console.log(info.message)
    requestNet({
      url: '/add/friend',
      method: 'POST',
      data: {
        uid: info.uid,
        fid: info.id,
        msg: info.message
      },
      header: {
        token: info.token
      }
    }).then(res => {
      console.log(res)
      let code = res.data.code
      if (code == 200) {
        uni.showToast({
          title: '发送成功',
          icon: 'success'
        })
        info.message = '请求添加好友~'
        info.flag = false
      } else {
        uni.showToast({
          title: '发送失败',
          icon: 'error'
        })
      }
    }, err => console.log(err))
  }
  //前往聊天页面
  function sendMsg() {
    uni.navigateTo({
      url: '/pages/chatPage/chatPage'
    })
  }
  //引入生命周期函数
  onShow(() => {
    //页面加载时，再次获取查看对象用户的详细信息
    getTargetUserInfo()
  })
  onLoad((e) => {
    info.id = parseInt(e.id) //获取传递参数用户的id
    getNowUserInfo() //获取当前用户缓存信息
    //getTargetUserInfo() //获取查看对象用户的详细信息
    judgeIsFriend() //判断查看对象是否是当前对象的好友
  })
</script>

<style lang="scss" scoped>
  @import '@/assets/css/top.scss';

  .my {
    height: 1240rpx;
    // height: 100%;
    position: relative;

    .top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 13;

      .back {
        margin-left: 30rpx;
        height: 48rpx;
        width: 48rpx;

        image {
          height: 100%;
          width: 100%;
        }
      }

      .more {
        margin-right: 30rpx;
        width: 52rpx;
        height: 12rpx;
        line-height: 12rpx;

        image {
          height: 100%;
          width: 100%;
        }
      }
    }

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;


      image {
        z-index: -1;
        position: absolute;
        opacity: 0.6;
        height: 100%;
        width: 100%;
        filter: blur(15rpx);
      }
    }

    .mains {
      text-align: center;
      margin-top: 100rpx;
      position: relative;
      // z-index: 10;

      .avater {
        position: relative;
        display: flex;
        justify-content: center;

        .avater-p {
          position: relative;
          height: 400rpx;
          width: 400rpx;

          image {
            height: 400rpx;
            width: 400rpx;
            border-radius: 10px;
          }

          .female {
            background-color: #FF5D5B;
            border-radius: 50%;
          }

          .male {
            background-color: #0ea3ff;
            border-radius: 50%;
          }

          .sex {
            position: absolute;
            bottom: 30rpx;
            right: 20rpx;
            height: 64rpx;
            width: 64rpx;
            padding-top: 10rpx;

            image {
              height: 40rpx;
              width: 40rpx;
              line-height: 40rpx;
            }
          }
        }
      }



      .username {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 40rpx;
        font-size: 52rpx;

        .nickname {
          margin-top: 10rpx;
          font-size: 28rpx;
        }
      }

      .info {
        margin: 20rpx 60rpx;
        color: $uni-text-color;
      }

    }

    .button {
      margin-bottom: 0;
      padding: 20rpx 40rpx;
    }
  }

  .add-bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 11;
    background: linear-gradient(#29a1f7, rgb(217, 238, 32));

    .addperson {
      position: relative;
      z-index: 12;
      top: 30%;
      height: 70%;
      width: 100%;

      // background-color: var(--bg-color);
      .name {
        position: absolute;
        top: 220rpx;
        z-index: 13;
        font-size: 52rpx;
        margin: 20rpx 20rpx;
      }

      .text {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 95%;
        top: 330rpx;
      }

      .opertor {
        display: flex;
        align-items: center;
        width: 100%;
        z-index: 14;
        position: absolute;
        bottom: 40rpx;

        .cnacel {
          margin-left: 20rpx;
          width: 30%;
          margin-right: 60rpx;
        }

        .send {
          margin-right: 20rpx;
          width: 70%;
        }
      }
    }
  }
</style>
